import { Map, MapControl } from '@/compnents';
import { RestorationIcon } from '@/compnents/icons';
// import { SearchLocation } from '@/platform/pc/components';
import { useAppStore } from '@/stores';
import { DrawCtrl } from '../draw-ctrl';
import { Menu } from '../menu';
import { MarkerFeaturePopup } from '../../components';
import './index.less';

export const MapPage = () => {
  const dispatch = useAppStore.use.dispatch();
  const mapDispatch = useAppStore.use.mapDispatch();
  const map = useAppStore.use.map();

  const onRestorationClick = () => {
    if (map) map.restoration();
  };

  return (
    <>
      <Map onReady={(m) => dispatch({ map: m })} dispatch={mapDispatch} />
      {map && (
        <>
          <DrawCtrl map={map} />
          <MarkerFeaturePopup />
          <Menu map={map} />
          {/* <MapControl position="top-right" map={map} render={<SearchLocation map={map} />} /> */}
          <MapControl map={map} render={<RestorationIcon onClick={onRestorationClick} />} />
        </>
      )}
    </>
  );
};
